<template>
    <div class="mask-file">
        <div class="left">
            <div class="item1" v-show="step.one">
                <el-popconfirm
                    ref="onePop"
                    title="四种方式均可添加文件"
                    confirm-button-text="下一步"
                    cancel-button-text=" "
                    hide-icon
                    @confirm="stepClick('two')"
                    placement="top"
                >
                    <div class="one" ref="one" slot="reference"></div>
                </el-popconfirm>
                <div class="item1-top"></div>
                <!-- <div class="item1-bottom" @click="oneClick"></div> -->
            </div>
            
            
        </div>
        <div class="right">
            <div class="item2" v-show="step.two">
                <el-popconfirm
                    title="操作的文档均在云盘生成一份"
                    confirm-button-text="下一步"
                    cancel-button-text=" "
                    hide-icon
                    @confirm="stepClick('three')"
                    placement="left"
                >
                    <div ref="two" class="two" slot="reference"></div>
                </el-popconfirm>
            </div>

            <div class="item3" v-show="step.three">
                <el-popconfirm
                    title="赠送100MB的云盘，可上传文档/图片，同时可共享"
                    confirm-button-text="开始使用"
                    cancel-button-text=" "
                    hide-icon
                    @confirm="close"
                    placement="left"
                >
                    <div ref="three" class="three" slot="reference"></div>
                </el-popconfirm>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mixins: [],
    components: {},
    props: {},
    data() {
        return {
            step: {
                one: true,
                two: false,
                three: false,
            },
        };
    },
    computed: {},
    methods: {
        /**
         * 步骤点击
         * @param {keyName} 下一级的ref、所绑定值的key
         */
        stepClick(keyName) {
            const that = this;
            Object.keys(that.step).forEach((key) => {
                that.step[key] = false;
            });
            that.step[keyName] = true;
            this.$refs[keyName].click();
        },
        close() {
            this.$emit("close");
        },
    },
    mounted() {
        this.$refs.one.click();
    },
};
</script>

<style lang="scss" scoped>
.mask-file {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        position: relative;
        min-width: 914px;
        flex: 1;

        .item1 {
            display: flex;
            justify-content: center;
            width: 100%;

            div {
                width: 100%;
                height: 100%;
            }

            .item1-top {
                position: fixed;
                top: 65px;
                left: 0px;
                width: 300px;
                height: 50px;
                border-radius: 5px;
                background-color: white;
            }

            // .item1-bottom {
            //     width: 550px;
            //     height: 100px;
            //     margin-top: 450px;
            //     border-radius: 5px;
            //     background-color: white;
            // }

            .one {
                margin-top: 476px;
                width: 550px;
                height: 100px;
                background-color: white;
            }
        }

    }

    .right {
        width: 280px;
        height: 100%;

        .item2 {
            position: absolute;
            top: 210px;
            right: 5px;
            width: 270px;
            height: 300px;
            border-radius: 5px;
            background-color: white;

            div {
                width: 100%;
                height: 100%;
            }
        }

        .item3 {
            position: absolute;
            top: 115px;
            left: 5px;
            width: 270px;
            height: 80px;
            border-radius: 5px;
            background-color: white;

            div {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>